import React from 'react';
import { View, StyleSheet, Platform, StatusBar } from 'react-native';
import { useSafeAreaInsets } from 'react-native-safe-area-context';
import { colors } from '../styles';

interface SafeAreaViewProps {
  children: React.ReactNode;
  style?: object;
}

const SafeAreaView: React.FC<SafeAreaViewProps> = ({ children, style }) => {
  const insets = useSafeAreaInsets();

  const safeAreaStyle = [
    styles.container,
    {
      paddingTop: insets.top,
      paddingBottom: insets.bottom,
      paddingLeft: insets.left,
      paddingRight: insets.right,
    },
    style,
  ];

  return (
    <>
      <StatusBar barStyle="dark-content" backgroundColor={colors.white} />
      <View style={safeAreaStyle}>{children}</View>
    </>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    // backgroundColor: colors.white, // 确保安全区域背景为白色
  },
});

export default SafeAreaView;
